<!doctype html>

<html>

	<head>

		<meta charset="utf-8">

		<title>懒加载</title>
	</head>

	<body>
<!--
1,用图片提前占位 
placeholder : "img/grey.gif", 
参数:placeholder,值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏 

2,载入使用何种效果 
effect : "fadeIn", 
参数：effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn 

3,提前开始加载 
threshold : 200, 
参数:threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉. 

4,事件触发时才加载 
event : "click", 
参数:event,值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标莫过或点击图片才开始加载,后两个值未测试… 

5,对某容器中的图片实现效果 
Container: $("#container"), 
参数:container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片 

6,图片排序混乱时 
failurelimit : 10, 
参数:failurelimit,值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个
7.你必须改变图片的标签。图像的地址必须放在data-original属性上。给懒加载图像一个特定的class（例如:lazy）。这样你可以很容易地进行图像插件捆绑。
8.$("img.lazy").lazyload();这将使所有 class 为 lazy 的图片将被延迟加载.
9.这里必须设置图片的width和height,否则插件可能无法正常工作。
10.加载隐藏的图片。Lazy Load 默认忽略了隐藏图片. 如果你想要加载隐藏图片, 请将 skip_invisible 设为 false
11.当图像不连续时。可以通过 failurelimit 选项来控制加载行为.将 failurelimit 设为 10 ，令插件找到 10 个不在可见区域的图片时才停止搜索. 
可参考：http://www.cnblogs.com/tlweb/p/5885716.html
-->
		
		<img class="lazy" data-original="img/bmw_m1_hood.jpg" width="765" height="574" >

		<img class="lazy" data-original="img/bmw_m1_side.jpg" width="765" height="574" >

		<img class="lazy" data-original="img/viper_1.jpg" width="765" height="574" >

		<img class="lazy" data-original="img/viper_corner.jpg" width="765" height="574" >

		<img class="lazy" data-original="img/bmw_m3_gt.jpg" width="765" height="574" >

		<img class="lazy" data-original="img/corvette_pitstop.jpg" width="765" height="574" >
		
		<img class="lazy" data-original="img/corvette_pitstop.jpg" width="765" height="574" >
		<img class="lazy" data-original="img/corvette_pitstop.jpg" width="765" height="574" >
		<img class="lazy" data-original="img/corvette_pitstop.jpg" width="765" height="574" >
		<img class="lazy" data-original="img/corvette_pitstop.jpg" width="765" height="574" >
		<img class="lazy" data-original="img/corvette_pitstop.jpg" width="765" height="574" >

		<script src="js/jquery-2.1.4.js"></script>

		<script src="js/jquery.lazyload.js"></script>

		<script type="text/javascript" charset="utf-8">
//			$(function() {
//				$("img.lazy").lazyload({
//					effect: "fadeIn"
//				});
//
//			});
			$(function() {
			    $("img.lazy").lazyload({
//			        event : "mouseover"
//					threshold : 200
					effect: "slideDown"
			    });
			});
//			
//			$(window).bind("load", function() {
//			    var timeout = setTimeout(function() { $("img.lazy").trigger("sporty") }, 2000);
//			});    
		</script>
	</body>

</html>